<!--
 * @Description: react基础
 * @Author: rendc
 * @Date: 2022-06-15 08:40:01
 * @LastEditors: rendc
 * @LastEditTime: 2022-06-15 09:49:45
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React</title>
  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <!-- 加载我们的 React 组件。-->
  <script src="./babel.min.js"></script>
</head>

<body>
  <h1>欢迎登录</h1>
  <div id="app">
  </div>
</body>
<script type="text/babel">
  class MyForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name:'',
      password:'',
      isLogin:false,
    };
    // 为了在回调中使用 `this`，这个绑定是必不可少的
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.passwordHandleChange = this.passwordHandleChange.bind(this);
    this.quitHandler = this.quitHandler.bind(this);
  }


  handleSubmit(event) {
    event.preventDefault();
    let {name,password,isLogin} = this.state
    console.log('🤡 CC - MyForm - handleSubmit - isLogin', isLogin)
    console.log(name)
    console.log(password)
    if (name == "张三" && password =="123456") {
      this.setState({
        isLogin:true,
      })
    }
    else{
      alert("用户名密码错误，请重新输入")
      this.setState({
        name:"",
        password:"",
    });
    }
  }

  handleChange(event) {
    this.setState({
      name:event.target.value
    });
  }
  passwordHandleChange(event) {
    this.setState({
      password:event.target.value
    });
  }
  quitHandler(event) {
    this.setState({
      name:"",
      password:"",
      isLogin:false,
    });
  }

  render() {
    if (this.state.isLogin) {
      return (
        <div>
          <h1>你好，{this.state.name}，欢迎登录</h1>
          <button onClick={this.quitHandler}>退出</button>
        </div>
      );
    } else {
      return (
      <form onSubmit={this.handleSubmit}>
        <label>
          姓名：<input type="text" value={this.state.name} onChange={this.handleChange}/>
        </label>
        <label>
          密码：<input type="text" value={this.state.password} onChange={this.passwordHandleChange}/>
        </label>
        <input type="submit" value="提交" />
      </form>
      );
    }
    }
  }
  function App(props) {
    return <div><MyForm/></div>
  }
  ReactDOM.render(
    <App/>,
    document.getElementById('app')
  )

</script>

</html>